<template>  
  <div class="login-container" v-if="!authStore.isLoggedIn">  
    <!-- 登录表单 -->  
    <form @submit.prevent="handleSubmit">  
      <div class="form-group">  
        <label for="username">用户名</label>  
        <input v-model="username" type="text" id="username" placeholder="Username" class="form-control" />  
      </div>  
      <div class="form-group">  
        <label for="password">密码</label>  
        <input v-model="password" type="password" id="password" placeholder="Password" class="form-control" />  
      </div>  
      <button type="submit" class="btn btn-primary">登录</button>
      <p class="ll">查看成绩请按F12换成移动端可查看</p>  
    </form>  
  </div>  
  <div v-else class="logged-in-container">  
    <!-- 登录成功后的其他内容 -->  
    <p class="uuu">Welcome, {{ authStore.user.username }}!</p>  
    <!-- 退出登录按钮 -->  
    <button @click="handleLogout" class="btn btn-secondary">退出登录</button>  
  </div> 
</template> 
    
  <script setup>  
  import { ref } from 'vue';  
  import { useAuthStore } from '@/stores/auth';  
  import { useRoute } from 'vue-router';  
   
  const input = ref('')
  const username = ref('yaotiandi');  
  const password = ref('123456');  
  const authStore = useAuthStore();  
  const route = useRoute();  
    
  const handleSubmit = async () => {  
    // 假设的特定账号和密码  
    const correctUsername = 'yaotiandi';  
    const correctPassword = '123456';  
    
    // 检查用户输入的账号和密码是否正确  
    if (username.value === correctUsername && password.value === correctPassword) {  
      try {  
        // 登录成功，更新Pinia store中的登录状态  
        await authStore.login({ username: username.value, password: password.value });  
          
        // 登录成功后，根据路由参数决定重定向到哪里  
        const redirect = route.query.redirect;  
        if (redirect) {  
          await this.$router.push(redirect);  
        } else {  
          // 如果没有重定向参数，重定向到首页或任意默认页面  
          await this.$router.push('/');  
        }  
      } catch (error) {  
        // 登录成功后的其他处理逻辑（如果有的话）  
        console.error('After login error:', error);  
      }  
    } else {  
      // 登录失败，可以显示错误信息给用户  
      alert('Invalid username or password');  
    }  
  }; 
  const handleLogout = async () => {  
  try {  
    // 调用 authStore 中用于登出的方法  
    await authStore.logout();  
    // 登出后重定向到登录页面或首页  
    await router.push('/login'); // 假设登录页面的路由是 '/login'  
  } catch (error) {  
    // 处理登出失败的情况  
    console.error('Logout failed:', error);  
  }  
};  
  </script>
  <style scoped>  
.login-container {
  width: 300px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
  font-size: 16px;
}

.form-control {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

.btn {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

.logged-in-container {
  width: 300px;
  margin: 0 auto;
}

.uuu {
  font-size: 20px;
} 
.ll{
  color: red;
  font-size: 40px;
} 
  </style>